<template>
  <div class="wr-24">
    <div class="left-content">
      <!-- 信息区 -->
      <div class="rect-sty" style="padding-top: 32px;">
        <div class="rules-sty">
          <!-- <img src="../images/logo.png" class="logo" @click="backMet()" alt="" /> undone-->
          <div class="right-sty">
            <div class="red-text" @click="rulesQaMet()">Q&A</div>
            <div class="rules-text" @click="rulesMet()">Rules</div>
          </div>
        </div>
        <div class="user-name">
          <Poptip v-if="shouldShowPoptip" trigger="hover" :content="userInfo.userName || userInfo.email">
            <span class="name-sty">{{ userInfo.userName || userInfo.email }}</span>
          </Poptip>
          <span v-else class="name">{{ userInfo.userName || userInfo.email }}</span>
          <span class="level-current">V{{ userInfo.newPromoteLevel || 1 }}</span>
        </div>
        <div class="next-level">
          <span class="need-text">
            Need {{ userInfo.needOrderUserCount || 0 }} more sign user to level up
          </span>
          <span class="need-num">
            <span class="color">
              {{ userInfo.currentOrderUserCount || 0 }}</span>/{{ userInfo.targetOrderUserCount || 0 }}
          </span>
        </div>
        <div class="progress">
          <div class="progress-sty">
            <div class="progress-container">
              <!-- 进度条填充 -->
              <div class="progress-bar" :style="{ width: progress + '%' }"></div>
            </div>
          </div>
        </div>
        <div class="current-sty">
          <div class="level-sty" v-for="(item, index) in levelArr" :key="index">
            <Poptip trigger="hover" :placement="index == 0 ? 'bottom-start' : 'bottom'">
              <div class="level" :style="{ background: calculateLevelBg(index) }" @mouseenter="mouseEnter(index)">
                V{{ item.level }}
              </div>
              <div v-if="getShipBonRateDesc()" class="desc-area" slot="content" v-html="getShipBonRateDesc()"></div>
            </Poptip>
            <img src="../images/gap.png" v-if="index < levelArr.length - 1" class="gap" alt="" />
          </div>
        </div>
      </div>
      <!-- 佣金区 -->
      <div class="rect-sty area-hei">
        <div class="flex-sty">
          <div class="area-tit">Bonus Wallet</div>
          <div class="small-text">
            Monthly Withdrawal Limit：{{ BonWalInfo.withdrawnCount || 0 }}/{{
              BonWalInfo.withdrawalLimit || 0
            }}
          </div>
        </div>
				<div class="mt-10 flex a-c p-16 bg-6e7 br-2 tip-wallet">
					<img class="tip-wallet-icon" src="@/assets/images/public/bonus-wallet-icon.png" />
					<div class="f-1 pl-16 f-14 lin-20 col-d47">
						<div>
							Please note that your bonus amount will be 
						</div>
						<div>
							adjusted based on the current exchange rate.
						</div>
					</div>
				</div>
        <Row>
          <Col span="12">
          <div class="text-label">
            Total Bonus
            <Poptip trigger="hover" :content="tip1">
              <Icon type="ios-help-circle-outline" size="14" class="tooltip" />
            </Poptip>
          </div>
          <div class="money-value">{{ userCurrency.currencySymbol }} {{ BonWalInfo.totalBonus || 0 }}</div>
          </Col>
          <Col span="12">
          <div class="text-label">
            Withdrawn Bonus
            <Poptip trigger="hover" width="300">
              <Icon type="ios-help-circle-outline" size="14" class="tooltip" />
              <div slot="content" class="tip-text">{{ tip2 }}</div>
            </Poptip>
          </div>
          <div class="money-value gray-text">
            {{ userCurrency.currencySymbol }} {{ BonWalInfo.withdrawnBonus || 0 }}
          </div>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <div class="text-label" style="margin-top: 24px">
            Unsettled Bonus
            <Poptip trigger="hover" width="300">
              <Icon type="ios-help-circle-outline" size="14" class="tooltip" />
              <div slot="content" class="tip-text">{{ tip3 }}</div>
            </Poptip>
          </div>
          <div class="money-value gray-text">
            {{ userCurrency.currencySymbol }} {{ BonWalInfo.unsettledBonus || 0 }}
          </div>
          </Col>
        </Row>
        <Divider />
        <Row>
          <Col span="12">
          <div class="text-label top-sty">
            Settled Bonus
            <Poptip trigger="hover" width="300">
              <Icon type="ios-help-circle-outline" size="14" class="tooltip" />
              <div slot="content" class="tip-text">{{ tip4 }}</div>
            </Poptip>
          </div>
          <div class="money-value pink-text">
            {{ userCurrency.currencySymbol }} {{ BonWalInfo.settledBonus || 0 }}
          </div>
          </Col>
        </Row>
        <div class="handle-sty">
          <div v-if="processedSettledBonusNum == 0" class="disable-btn">Transfer To Balance</div>
          <div v-else class="black-btn" @click="transFerMet()">
            Transfer To Balance
          </div>
          <div v-if="BonWalInfo.withdrawnCount == BonWalInfo.withdrawalLimit || processedSettledBonusNum == 0"
            class="un-with-draw">Withdraw</div>
          <div v-else class="with-draw" @click="withDrawMet()">Withdraw</div>
        </div>
      </div>
      <!-- 排名区 -->
      <div class="rect-sty user-hei pos-sty">
        <div class="area-tit" style="display: flex;align-items: center;gap: 6px;">
          Best Promoter Of The Month
          <Poptip trigger="hover" width="300">
            <Icon type="ios-help-circle-outline" size="18" class="tooltip" />
            <div slot="content" class="tip-text" v-html="titTip" style="font-weight: 400;"></div>
          </Poptip>
        </div>
        <div class="rank-area" v-if="month20List && month20List.length > 0" @scroll="handleScroll()">
          <div class="rank-list" v-for="(item, index) in month20List" :key="index"
            :style="{ marginTop: index > 2 ? '16px' : '', paddingTop: index < 3 ? '16px' : '' }">
            <div :class="calculateColor(index)">
              {{ index < 9 ? "0" : "" }}{{ item.rank }}</div>
                <div class="avatar-sty">
                  <img :src="crownCop(index)" v-if="index < 3" class="crown-icon" alt="">
                  <img v-if="item.avatar" :src="item.avatar" class="rank-avatar" alt="" />
                  <div class="create-avatar" v-else :style="{ background: calculateBg(item.email) }">
                    {{ calculateText(item.email) }}
                  </div>
                </div>
                <div class="rank-info">
                  <div class="between-sty">
                    <div class="rank-name">{{ item.email }}</div>
                    <div class="air-pop" v-if="index < 3">
                      I’ve earned
                      <span :class="calculateColor(index)">{{ userCurrency.currencySymbol }}{{ item.totalBonus }}</span>
                      bonus from 100buy
                    </div>
                  </div>
                  <div class="invite-num">
                    Invited <span>{{ item.orderUsers }}</span> Order Users
                  </div>
                </div>
            </div>
          </div>
          <div class="empty-sty" v-if="!month20List || month20List.length === 0">
            <img src="@/assets/images/empty/empty_prize.png" class="empty" alt="" />
            <div class="empty-text">
              Last month's rankings are under review; current rankings will be
              released at <span>0:00</span> the following day.
            </div>
          </div>
          <div class="hover-rect"
            v-if="monthUserInfo && month20List && month20List.length > 0 && isRectVisible && userInfo.userType != 'KOL' && userInfo.userType != 'KOL_FREEZE' && userInfo.userType != 'CJBZ'">
            <div class="invite-tip">
              Invite <span>{{ monthUserInfo.needOrderUsers > 99 ? '99+' : monthUserInfo.needOrderUsers }}</span> more to
              pass
              the rank above
              <img src="../images/up_arrow.png" class="up-arrow" alt="" />
            </div>
            <div class="rect-user">
              <div style="display: flex; align-items: center">
                <div class="user-img">
                  <div class="avatar-sty">
                    <img :src="crownSizeCop(monthUserInfo.rank)"
                      v-if="monthUserInfo.rank < 4 && monthUserInfo.rank != 0" class="crown-icon" alt="">
                    <img v-if="monthUserInfo.avatar" :src="monthUserInfo.avatar" class="avatar" alt="" />
                    <div v-else class="no-avatar" :style="{ background: calculateBg(monthUserInfo.email) }">
                      {{ calculateText(monthUserInfo.email) }}
                    </div>
                  </div>
                  <div class="tag-sty">
                    <div class="in-num">
                      {{ monthUserInfo.rank > 999 || monthUserInfo.rank == 0 ? "999+" :
                        monthUserInfo.rank }}
                    </div>
                  </div>
                </div>
                <div class="user-tag">
                  <div class="name-text">{{ monthUserInfo.email }}</div>
                  <div class="invite-user">
                    Invited <span>{{ monthUserInfo.orderUsers }}</span> Order Users
                  </div>
                </div>
              </div>
              <div>
                <div class="show-btn" @click="shareMet()">Show it!</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <!-- 分享区 -->
        <div class="banner-sty">
          <div class="img-area">
            <img src="../images/banner_bg.png" class="banner-bg" alt="">
            <div class="screen-area">
              <screen-pop></screen-pop>
              <!-- <div class="screen-sty" v-for="(item, index) in screenArr" :key="index"
                :class="{ 'animate': currentIndex === index }">
                <div class="create-avatar" :style="{ background: calculateBg(item[0]) }">
                  {{ calculateText(item[0]) }}
                </div>
                <span class="text">{{ item[0] }} <span>{{ item[1] }}</span> {{ item[2] }}</span>
              </div> -->
            </div>
            <img src="../images/lef.png" class="hand-lef" alt="">
            <img src="../images/rig.png" class="hand-rig" alt="">
            <div class="copy-link" @click="copyMet(inviteLink)"></div>
            <div class="down-load" @click="downMet()"></div>
            <!-- 进度区 -->
            <img src="../images/step.png" class="step-sty" alt="" />
          </div>
        </div>
        <!-- 明细区 -->
        <div class="rect-sty user-hei post-bot">
          <div class="head">
            <div class="tit-sty">
              <div class="area-tit">Invitation Performance</div>
              <div class="sub-tit">
                Only display data for users who have completed order payments.
              </div>
            </div>
            <div class="detail-btn" @click="detMet()">
              View Details
              <Icon type="ios-arrow-forward" size="22" />
            </div>
          </div>
          <div class="info-area">
            <div class="left">
              <div class="list-sty">
                <div class="label">
                  Total Invited Users
                  <Poptip trigger="hover" width="300">
                    <Icon type="ios-help-circle-outline" class="tooltip" />
                    <div slot="content" class="tip-text">{{ tip5 }}</div>
                  </Poptip>
                </div>
								<div class="flex a-c j-sb mt-16 lin-34">
									<div class="label-value">{{ proAllInfo.totalInvitedUsers || 0 }}</div>
									<div class="col-fff f-12 lin-17 flex a-c c-p" @click="$refs.detailsRef.open()">
										<div class="mr-4">
											View Details
										</div>
										<Icon type="ios-arrow-forward" size="12" />
									</div>
								</div>
              </div>
							<div class="list-line"></div>
              <!-- <img src="../images/right_gap.png" class="right-gap" alt="" /> -->
              <div class="list-sty">
                <div class="label">
                  Total Order Users
                  <Poptip trigger="hover" width="300">
                    <Icon type="ios-help-circle-outline" class="tooltip" />
                    <div slot="content" class="tip-text">{{ tip6 }}</div>
                  </Poptip>
                </div>
								<div class="flex a-c mt-16">
									<div class="label-value">{{ proAllInfo.totalOrderUsers || 0 }}</div>
								</div>
              </div>
							<div class="list-line"></div>
              <!-- <img src="../images/right_gap.png" class="right-gap" alt="" /> -->
              <div class="list-sty">
                <div class="label">
                  Total Sign Users
                  <Poptip trigger="hover" width="300">
                    <Icon type="ios-help-circle-outline" class="tooltip" />
                    <div slot="content" class="tip-text">{{ tip7 }}</div>
                  </Poptip>
                </div>
								<div class="flex a-c mt-16">
									<div class="label-value sign-value">{{ proAllInfo.totalSignUsers || 0 }}</div>
								</div>
              </div>
            </div>
            <div class="right flex a-s j-c">
							<div>
								<div class="label">
								  Order Users This Month
								  <Poptip trigger="hover" width="300" placement="left">
								    <Icon type="ios-help-circle-outline" class="tooltip" />
								    <div slot="content" class="tip-text">{{ tip8 }}</div>
								  </Poptip>
								</div>
								<div class="flex a-c mt-16">
									<div class="label-value">{{ proAllInfo.orderUsersOfThisMonth || 0 }}</div>
								</div>
							</div>
            </div>
          </div>
          <div class="table-head ff-regular">
            <Row>
              <Col span="6">
              <div class="table-name">User Name</div>
              </Col>
              <Col span="6">
              <div class="table-name">First Order Payment Bonus</div>
              </Col>
              <Col span="6">
              <div class="table-name">
                <div class="table-text">
                  Order Payment Bonus
                  <!-- <img src="../images/sort.png" v-if="orderSort === 0" @click="sortMet(1)" class="sort-icon" alt="">
                  <img src="../images/sort_top.png" v-if="orderSort === 1" @click="sortMet(2)" class="sort-icon" alt="">
                  <img src="../images/sort_bot.png" v-if="orderSort === 2" @click="sortMet(0)" class="sort-icon" alt=""> -->
                </div>
              </div>
              </Col>
              <Col span="6">
              <div class="table-name">
                <div class="table-text">
                  Shipping Payment Bonus
                  <!-- <img src="../images/sort.png" v-if="shippingSort === 0" @click="sortShiMet(1)" class="sort-icon"
                    alt="">
                  <img src="../images/sort_top.png" v-if="shippingSort === 1" @click="sortShiMet(2)" class="sort-icon"
                    alt="">
                  <img src="../images/sort_bot.png" v-if="shippingSort === 2" @click="sortShiMet(0)" class="sort-icon"
                    alt=""> -->
                </div>
              </div>
              </Col>
            </Row>
          </div>
          <div class="exp-sty">
            <Row>
              <Col span="6">
              <div></div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>Settled</span> | Unsettled Bonus
              </div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>Settled</span> | Unsettled Bonus
              </div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>Settled</span> | Unsettled Bonus
              </div>
              </Col>
            </Row>
          </div>
          <div class="list-hei" v-show="inviteListArr" @scroll="handleListScroll">
            <div class="empty-list" v-if="!inviteListArr || inviteListArr.length === 0">
              <img src="@/assets/images/empty/empty_prize.png" class="empty" alt="" />
            </div>
            <div class="list-info" v-for="(item, index) in inviteListArr" :key="index">
              <Row>
                <Col span="6" style="display: flex;align-items: center;justify-content: center;">
                <div class="list-name">{{ item.userName }}</div>
                </Col>
                <Col span="6">
                <div class="list-order-sty">
                  <!-- <div class="create-time">{{ item.firstOrderPaidTime || '-' }}</div> -->
                  <div class="amount-sty" style="margin-top: 0;">
                    <span>{{ userCurrency.currencySymbol }} {{ item.settledFirstOrderCommission || 0 }}</span> | {{
                      userCurrency.currencySymbol }}{{
                      item.unSettledFirstOrderCommission
                      || 0 }}
                  </div>
                </div>
                </Col>
                <Col span="6">
                <div class="list-order-sty">
                  <!-- <div class="create-time">{{ userCurrency.currencySymbol }} {{ item.cumulativeOrderAmount || 0 }}</div> -->
                  <div class="amount-sty" style="margin-top: 0;">
                    <span>{{ userCurrency.currencySymbol }} {{ item.settledGoodsCommission || 0 }}</span> | {{
                      userCurrency.currencySymbol }}{{
                      item.unSettledGoodsCommission || 0 }}
                  </div>
                </div>
                </Col>
                <Col span="6">
                <div class="list-order-sty">
                  <!-- <div class="create-time">{{ userCurrency.currencySymbol }} {{ item.cumulativeShippingPayment || 0 }}
                  </div> -->
                  <div class="amount-sty" style="margin-top: 0;">
                    <span>{{ userCurrency.currencySymbol }} {{ item.settledExpressCommission || 0 }}</span> | {{
                      userCurrency.currencySymbol }}{{ item.unSettledExpressCommission || 0 }}
                  </div>
                </div>
                </Col>
              </Row>
            </div>
            <div class="load-text" v-if="showLoad && hasMore">
              <Icon type="ios-loading" />&nbsp;&nbsp; Loading data...
            </div>
          </div>
          <div class="bottom-info" v-if="false">
            <Row>
              <Col span="6">
              <div class="list-label">Total:</div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>{{ userCurrency.currencySymbol }} {{ proAllInfo.settledFirstOrderCommissionTotal || 0 }}</span> |
                {{ userCurrency.currencySymbol }}{{ proAllInfo.unSettledFirstOrderCommissionTotal || 0 }}
              </div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>{{ userCurrency.currencySymbol }} {{ proAllInfo.settledGoodsCommissionTotal || 0 }}</span> |
                {{ userCurrency.currencySymbol }}{{ proAllInfo.unSettledGoodsCommissionTotal || 0 }}
              </div>
              </Col>
              <Col span="6">
              <div class="statistics-text">
                <span>{{ userCurrency.currencySymbol }} {{ proAllInfo.settledExpressCommissionTotal || 0 }}</span> |
                {{ userCurrency.currencySymbol }}{{ proAllInfo.unSettledExpressCommissionTotal || 0 }}
              </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
      <com-trans-to-bal ref="transRef" :settledBonusNum="BonWalInfo.settledBonus"
        @transEmitInfo="transEmitInfo"></com-trans-to-bal>
      <ShowItPop ref="showItRef"></ShowItPop>
      <invite-poster-pop ref="invitePosterRef"></invite-poster-pop>
			<!-- Total Invited Users - detail -->
			<invited-users-detail ref="detailsRef"></invited-users-detail>
    </div>
</template>
<script>
import { mapState } from "vuex";
import {
  getBonusWalletInfo,
  getMonthlyRankInfo,
  getPromoteStatInfo,
  listCommissionConfig,
  pageInvitePerformance,
  transferToBalance,
  barrageList
} from "@/api/activity";
import bigNumberUnit from "@/common/big-number-unit";
import comTransToBal from "../components/com-trans-to-bal.vue";
import ShowItPop from "../components/show-it-pop.vue";
import InvitePosterPop from '../components/invite-poster-pop.vue';
import { avatarBg } from "@/common/common";
import ScreenPop from '../components/screen-pop.vue';
import invitedUsersDetail from '../components/invited-users-detail.vue';

export default {
  components: { comTransToBal, ShowItPop, InvitePosterPop, ScreenPop,invitedUsersDetail },
  data() {
    return {
      screenArr: [],
      currentIndex: 0,
      inviteForm: {
        pageNo: 1,
        pageSize: 10,
      },
      isLoading: false, // 加载标志位
      hasMore: true, // 是否还有更多数据
      scrollContainer: null, // 滚动容器的引用
      showLoad: false,
      form: {
        pageNo: 1,
        pageSize: 10,
      },
      progress: 0,
      levelArr: [],
      currentMouseIndex: '',
      proAllInfo: {},
      monthUserInfo: {},
      month20List: [],
      BonWalInfo: {},
      inviteListArr: [],
      currentMouseLevel: 0,
      isRectVisible: true,
      lastScrollTop: 0,
      currentScrollTop: 0,
      orderSort: 0,
      shippingSort: 0,
      crownImg1: require('../images/crown1.png'),
      crownImg2: require('../images/crown2.png'),
      crownImg3: require('../images/crown3.png'),
      tip1: `Total Bonus=Settled Bonus+Withdrawn Bonus+Unsettled Bonus.`,
      tip2: `The bonuses you have previously withdrawn and transfered to balance (Funds under review or in transfer post-withdrawal application will be included)`,
      tip3: `Unsettled bonuses will only transition to a withdrawable status after the invitee has signed the parcel.`,
      tip4: `The withdrawable bonus.These will transition from "unsettled” to "withdrawable" status sooner the earlier the invitee sign the parcel.`,
      tip5: `Total number of new users registered through your invitation link or poster.`,
      tip6: `Total number of users you invited who have completed a order payment. (note: this number may decrease if orders are canceled)`,
      tip7: `Total number of users you invited who have signed a order.Your promotion level is directly tied to this number.`,
      tip8: `Total number of new users you invited this month who have completed a order payment. If the registration and payment occur in different months, the actual payment date will be used as the reference. (note: this number may decrease if orders are canceled)`,
      titTip: `Rankings are based on the number of <b>‘Order Users This Month’</b>. Blogger users are excluded from rankings.`
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      config: state => state.config.config,
      userCurrency: state => state.user.userCurrency,
    }),
    processedSettledBonusNum() {
      const value = parseFloat(this.BonWalInfo.settledBonus);
      return isNaN(value) ? 0 : value;
    },
    inviteLink() {
      return `${this.config.webDomain}/register?inviteCode=${this.userInfo.inviteCode}`;
    },
    // 计算显示的文本
    displayText() {
      return this.userInfo.userName || this.userInfo.email || '';
    },
    // 判断是否应该显示 Poptip
    shouldShowPoptip() {
      return this.displayText.length > 26;
    }
  },
  watch: {
    userInfo: {
      immediate: true, // 立即执行一次
      deep: true,
      handler(newVal) {
        if (newVal) {
          if (newVal.currentOrderUserCount >= newVal.targetOrderUserCount) {
            this.progress = 100;//如果大于等于最高等级的话，进度显示100
          } else {
            this.progress = (newVal.currentOrderUserCount / newVal.targetOrderUserCount) * 100;
          }
        }
      }
    }
  },
  created() {
    this.getBonWalData();
    this.getMonRankData();
    this.getProStaData();
    this.getLisComCon();
    this.getBarrageList();
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollContainer = this.$el.querySelector('.list-hei');
      this.getInvPer();
    });
  },
  methods: {
    getBarrageList() {
      barrageList().then((res) => {
        this.screenArr = res.result;
      })
    },
    rulesMet() {
      window.open(`https://100buy.com/notice/1897193225427402754`, '_black');
    },
    rulesQaMet() {
      window.open(`https://100buy.com/notice/1899743381821128705`, '_black');
    },
    calculateBg(email) {
      const result = avatarBg(email);
      return result.bg;
    },
    calculateText(email) {
      const result = avatarBg(email);
      return result.text;
    },
    // 用不到
    calculateNum(num) {
      return bigNumberUnit(num);
    },
    copyMet(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    downMet() {
      this.$refs.invitePosterRef.open(this.userInfo.inviteCode);
    },
    // 获取佣金钱包信息接口
    getBonWalData() {
      getBonusWalletInfo().then((res) => {
        this.BonWalInfo = res.result;
      });
    },
    // 获取当月排行榜信息
    getMonRankData() {
      getMonthlyRankInfo().then((res) => {
        this.monthUserInfo = res.result.currentUserRankInfo;
        this.month20List = res.result.top20List;
      });
    },
    // 获取推广汇总信息接口
    getProStaData() {
      getPromoteStatInfo().then((res) => {
        this.proAllInfo = res.result;
      });
    },
    // 获取佣金配置
    getLisComCon() {
      listCommissionConfig().then((res) => {
        this.levelArr = res.result;
      });
    },
    // 分页查询邀请表现列表
    getInvPer() {
      if (this.isLoading || !this.hasMore) return;
      this.isLoading = true;
      if (this.scrollContainer) {
        const oldScrollTop = this.scrollContainer.scrollTop; // 记录加载前滚动条距离顶部的距离
        const oldScrollHeight = this.scrollContainer.scrollHeight; // 记录加载前的滚动高度
        pageInvitePerformance(this.inviteForm).then((res) => {
          if (res.result.records.length > 0) {
            this.showLoad = false;//是否显示加载
            // 过滤掉 res.result.records 中已经存在于 this.inviteDetArr 的数据
            const newData = res.result.records.filter(newItem => {
              return !this.inviteListArr.some(oldItem => oldItem.userId === newItem.userId);
            });
            this.inviteListArr = this.inviteListArr.concat(newData);
            this.inviteForm.pageNo++; // 增加页码
            // 计算加载新数据后滚动条需要调整的位置
            if (this.scrollContainer) {
              const newScrollHeight = this.scrollContainer.scrollHeight;
              const scrollHeightDifference = newScrollHeight - oldScrollHeight;
              this.scrollContainer.scrollTop = oldScrollTop + scrollHeightDifference;
            }
          } else {
            this.hasMore = false; // 没有更多数据了
            this.showLoad = false;//是否显示加载
          }
          this.isLoading = false;
        }).catch(() => {
          this.isLoading = false;
          this.showLoad = false;//是否显示加载
        });
      }
    },
    calculateLevelBg(index) {
      // 当前等级对应的索引
      const currentLevelIndex = this.userInfo.newPromoteLevel - 1;
      if (index === currentLevelIndex) {
        return "#1E1714";
      } else if (index < currentLevelIndex) {
        return "#767B93";
      } else {
        return "#CFD1D9";
      }
    },
    calculateColor(index) {
      if (index === 0) {
        return "first-text";
      } else if (index === 1) {
        return "second-text";
      } else if (index === 2) {
        return "three-text";
      } else {
        return "rank-num";
      }
    },
    handleScroll() {
      // 获取当前滚动区域的滚动位置
      this.currentScrollTop = this.$el.querySelector('.rank-area').scrollTop;
      // 判断滚动方向
      if (this.currentScrollTop > this.lastScrollTop) {
        // 向下滚动
        if (this.currentScrollTop - this.lastScrollTop >= 5) {
          // 向下滚动超过 5px，隐藏元素
          this.isRectVisible = false;
        }
      } else {
        // 向上滚动
        if (this.lastScrollTop - this.currentScrollTop >= 5) {
          // 向上滚动超过 5px，显示元素
          this.isRectVisible = true;
        }
      }
      // 更新上一次滚动的位置
      this.lastScrollTop = this.currentScrollTop;
    },
    getShipBonRateDesc() {
      const maxIndex = this.levelArr.length - 1;
      if (this.currentMouseLevel === maxIndex) {
        // 如果鼠标移入的是最大索引，直接获取该条数据的等级
        let currentLevel = this.levelArr[maxIndex].level;//最大等级的level值
        const currentLevelData = this.levelArr.find(item => item.level === currentLevel);
        return `Shipping Bonus Rate：<span>${currentLevelData.shippingBonusRate}%</span>`;
      } else {
        let currentLevel = this.levelArr[this.currentMouseLevel].level;
        const currentLevelData = this.levelArr.find(item => item.level === currentLevel);
        const nextLevel = this.levelArr[this.currentMouseLevel + 1].level;
        const nextLevelData = this.levelArr.find(item => item.level === nextLevel);
        return `Shipping Bonus Rate：<span>${currentLevelData.shippingBonusRate}%</span> -> ${nextLevelData.shippingBonusRate}% (next level)`;
      }
    },
    mouseEnter(index) {
      this.currentMouseLevel = index;
    },
    withDrawMet() {
      this.$router.push(`/user/commission`);
    },
    transFerMet() {
      this.$refs.transRef.open();
    },
    transEmitInfo(amount) {
      transferToBalance(amount).then((res) => {
        if (res.code === 200) {
          this.$refs.transRef.closeMet();
          this.getBonWalData();
          this.$Message.success("SUCCESS !");
        }
      });
    },
    detMet() {
      this.$router.push('/com-share-det');
    },
    sortMet(val) {
      this.shippingSort = 0;
      this.orderSort = val;
      this.inviteListArr = []; // 清空已有数据
      this.inviteForm.pageNo = 1;
      this.inviteForm.pageSize = 10;
      this.hasMore = true; // 重置是否还有更多数据的标志
      if (val === 0) {
        delete this.inviteForm.orderBy;
        delete this.inviteForm.sort;
        this.getInvPer();
      } else if (val === 1) {
        this.inviteForm.orderBy = 1;
        this.inviteForm.sort = 1;//正序
        this.getInvPer();
      } else if (val === 2) {
        this.inviteForm.orderBy = 1;
        this.inviteForm.sort = 2;//正序
        this.getInvPer();
      }
    },
    sortShiMet(val) {
      this.orderSort = 0;
      this.shippingSort = val;
      this.inviteListArr = []; // 清空已有数据
      this.inviteForm.pageNo = 1;
      this.inviteForm.pageSize = 10;
      this.hasMore = true; // 重置是否还有更多数据的标志
      if (val === 0) {
        delete this.inviteForm.orderBy;
        delete this.inviteForm.sort;
        this.getInvPer();
      } else if (val === 1) {
        this.inviteForm.orderBy = 2;
        this.inviteForm.sort = 1;//正序
        this.getInvPer();
      } else if (val === 2) {
        this.inviteForm.orderBy = 2;
        this.inviteForm.sort = 2;//正序
        this.getInvPer();
      }
    },
    shareMet() {
      let obj = {};
      obj.rank = (this.monthUserInfo.rank > 999 || this.monthUserInfo.rank == 0 ? "999+" : this.monthUserInfo.rank) || 0;
      obj.outperformedPercent = this.monthUserInfo.outperformedPercent ? this.monthUserInfo.outperformedPercent : 0;
      obj.orderUsers = this.monthUserInfo.orderUsers ? this.monthUserInfo.orderUsers : 0;
      obj.totalBonus = this.monthUserInfo.totalBonus ? this.monthUserInfo.totalBonus : 0;
      this.$refs.showItRef.open(obj);
    },
    handleListScroll(event) {
      this.showLoad = true;
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 20 && !this.isLoading && this.hasMore) {
        setTimeout(() => {
          this.getInvPer();
        }, 1000)
      }
    },
    crownCop(index) {
      if (index === 0) {
        return this.crownImg1;
      } else if (index === 1) {
        return this.crownImg2;
      } else if (index === 2) {
        return this.crownImg3;
      }
    },
    crownSizeCop(rank) {
      if (rank === 1) {
        return this.crownImg1;
      } else if (rank === 2) {
        return this.crownImg2;
      } else if (rank === 3) {
        return this.crownImg3;
      }
    },
    backMet() {
      this.$router.push('/');
    }
  }
};
</script>
<style lang="less" scoped>
:deep(.ivu-poptip-arrow) {
  border-top-color: transparent !important;
}

.tip-text {
  text-align: left;
  color: #1E1714;
  white-space: normal;
}

.wr-24 {
  width: 100%;
  padding: 67px 100px;
  background: #f5f5f7;
  display: flex;
  gap: 32px;

  .left-content {
    width: 466px;
  }

  .right-content {
    flex: 1;
  }

  .banner-sty {
    .img-area {
      width: 100%;
      height: 744px;
      position: relative;

      .banner-bg {
        width: 100%;
      }

      .screen-area {
        height: 80px;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 40px;
        z-index: 2;
      }

      .hand-lef {
        width: 57px;
        height: 57px;
        // animation: moveLeftHand 1.5s infinite ease-in-out;
        animation: scaleLeftHand 1.5s infinite ease-in-out;
        position: absolute;
        top: 210px;
        left: 35px;
        z-index: 3;
      }

      // /* 定义左手动画 */
      // @keyframes moveLeftHand {
      //   0% {
      //     transform: translateX(0) rotate(0deg);
      //   }

      //   50% {
      //     transform: translateX(-20px) rotate(-10deg);
      //   }

      //   100% {
      //     transform: translateX(0) rotate(0deg);
      //   }
      // }

      // /* 定义右手动画 */
      // @keyframes moveRightHand {
      //   0% {
      //     transform: translateX(0) rotate(0deg);
      //   }

      //   50% {
      //     transform: translateX(20px) rotate(10deg);
      //   }

      //   100% {
      //     transform: translateX(0) rotate(0deg);
      //   }
      // }

      @keyframes scaleLeftHand {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(0.8);
        }

        100% {
          transform: scale(1);
        }
      }

      /* 定义右手放大缩小动画 */
      @keyframes scaleRightHand {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(0.8);
        }

        100% {
          transform: scale(1);
        }
      }

      .hand-rig {
        width: 57px;
        height: 57px;
        // animation: moveRightHand 1.5s infinite ease-in-out;
        animation: scaleRightHand 1.5s infinite ease-in-out;
        position: absolute;
        top: 210px;
        left: 628px;
        z-index: 3;
      }

      .copy-link {
        width: 255px;
        height: 61px;
        border-radius: 25px;
        cursor: pointer;
        position: absolute;
        top: 188px;
        left: 60px;
      }

      .down-load {
        width: 319px;
        height: 61px;
        border-radius: 25px;
        cursor: pointer;
        position: absolute;
        top: 188px;
        left: 337px;
      }

      .step-sty {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }

  .rect-sty {
    padding: 24px;
    min-height: 250px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e8e8e8;

    .rank-area {
      height: 700px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .rank-list {
        display: flex;
        align-items: center;
        margin-top: 28px;
        // padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e9eaf3;

        .rank-num {
          font-weight: bold;
          font-size: 18px;
          color: #1e1714;
          line-height: 21px;
        }

        .avatar-sty {
          position: relative;

          .crown-icon {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 10px;
            top: -10px;
          }

          .rank-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin-left: 14px;
          }

          .create-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            font-weight: 600;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .rank-info {
          flex: 1;
          margin-left: 16px;

          .between-sty {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .rank-name {
              font-weight: 600;
              font-size: 16px;
              color: #767b93;
              line-height: 19px;
            }

            .air-pop {
              width: 200px;
              padding: 8px 12px;
              background: #FFFFFF;
              fill: #FCFBFA;
              box-shadow: -0.905px -1.811px 2.716px 0px rgba(194, 194, 194, 0.30) inset, 0px 3.622px 3.622px 0px #FFF inset;
              filter: drop-shadow(6.531px 7px 13.5px rgba(133, 133, 133, 0.13)) drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.08));
              border-radius: 10px 10px 10px 10px;
              font-weight: 500;
              font-size: 16px;
              color: #aeb0b9;
              line-height: 19px;
              float: right;
              margin-top: -28px;
              margin-right: 20px;
            }
          }

          .invite-num {
            font-weight: 600;
            font-size: 16px;
            color: #767b93;
            line-height: 19px;
            margin-top: 6px;

            span {
              font-weight: 600;
              font-size: 20px;
              color: #ff186b;
              line-height: 24px;
            }
          }
        }
      }

      .rank-list:nth-last-of-type(1) {
        border-bottom: none;
      }
    }

    .rank-area::-webkit-scrollbar {
      display: none;
    }

    .empty-sty {
      height: 740px;
      text-align: center;

      .empty {
        width: 240px;
        height: 240px;
        margin-top: 78px;
      }

      .empty-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #767b93;
        line-height: 26px;

        span {
          color: #1e1714;
        }
      }
    }

    .rules-sty {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        width: 160px;
        cursor: pointer;
      }

      .right-sty {
        display: flex;
        align-items: center;
        gap: 24px;

        .red-text {
          height: 20px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #FF186B;
          line-height: 20px;
          border-bottom: 1px solid #FF186B;
          cursor: pointer;
        }

        .rules-text {
          height: 20px;
          font-weight: 500;
          font-size: 18px;
          color: #1e1714;
          line-height: 20px;
          border-bottom: 1px solid #1e1714;
          cursor: pointer;
        }
      }
    }

    .user-name {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;

      .name-sty {
        width: 360px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #1e1714;
        line-height: 23px;
        cursor: pointer;
      }

      .name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #1e1714;
        line-height: 23px;
      }

      .level-current {
        padding: 4px 13px;
        background: #1e1714;
        border-radius: 37px;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
      }
    }

    .next-level {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;

      .need-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #767b93;
        line-height: 19px;
      }

      .need-num {
        font-weight: 500;
        font-size: 16px;
        color: #767b93;
        line-height: 19px;

        .color {
          color: #ff186b;
        }
      }
    }

    .progress {
      width: 100%;
      margin-top: 20px;
      position: relative;

      .progress-sty {
        width: 100%;
        display: flex;
        align-items: center;

        .progress-container {
          flex: 1;
          width: 100%;
          height: 14px;
          background-color: #ffe1e6;
          border-radius: 10px;

          /* 进度条填充样式 */
          .progress-bar {
            height: 100%;
            background-color: #ff4e8f;
            border-radius: 10px;
          }
        }
      }
    }

    .current-sty {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;

      .level-sty {
        display: flex;
        align-items: center;
        gap: 12px;

        .desc-area {
          font-weight: 500;
          font-size: 14px;
          color: #1e1714;
          line-height: 16px;
          box-shadow: 0px 1px 11px 0px rgba(1, 6, 31, 0.09);
          border-radius: 0px 0px 0px 0px;

          :deep(span) {
            color: #ff186b !important;
          }

          :deep(.ivu-poptip-arrow) {
            border-bottom-color: '#F7F9FC';
          }

          :deep(.ivu-poptip-inner) {
            background-color: #F7F9FC;
          }
        }

        .level {
          padding: 4px 13px;
          background: #cfd1d9;
          border-radius: 37px;
          cursor: pointer;
          text-align: center;
          font-weight: 600;
          font-size: 14px;
          color: #ffffff;
          line-height: 16px;
        }

        .gap {
          width: 14px;
        }
      }
    }

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tit-sty {
        display: flex;
        align-items: end;
        gap: 12px;
      }

      .detail-btn {
        font-weight: 400;
        font-size: 20px;
        color: #767b93;
        line-height: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }

    .sub-tit {
      font-weight: 500;
      font-size: 18px;
      color: #aeb0b9;
      line-height: 23px;
      margin-top: 8px;
    }

    .info-area {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-top: 24px;

      .left {
        flex: 1;
        min-height: 114px;
        background: #6f58ff;
        border-radius: 12px 12px 12px 12px;
        padding: 20px 48px 20px 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
				.list-line{
					width: 1px;
					height: 40px;
					background: rgba(255, 255, 255, .6);
				}
        .list-sty {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
        }

        .right-gap {
          width: 16px;
          height: 16px;
        }
      }

      .right {
        width: 293px;
        min-height: 114px;
        background: #ff589e;
        border-radius: 12px 12px 12px 12px;
        text-align: center;
        padding-top: 22px;
      }
    }
  }

  .area-hei {
    // height: 456px;
    margin-top: 24px;
		padding-bottom:24px;
		.tip-wallet{
			.tip-wallet-icon{
				width: 40px;
				height: 40px;
			}
		}
  }

  .user-hei {
    height: 794px;
    margin-top: 24px;
  }

  .post-bot {
    margin-top: 24px;
    position: relative;
    // top: -38px;


    .list-hei {
      height: 430px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .empty-list {
        height: 350px;

        .empty {
          width: 240px;
          height: 240px;
          display: block;
          margin: 0 auto;
        }
      }

      .list-info {
        padding: 28px 0;
        border-bottom: 1px solid #E9EAF3;

        .list-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #1E1714;
          line-height: 21px;
          text-align: center;
        }

        .list-order-sty {
          text-align: center;

          .create-time {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #1E1714;
            line-height: 21px;
          }

          .amount-sty {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 18px;
            color: #767B93;
            line-height: 21px;
            margin-top: 12px;

            span {
              color: #FF186B;
            }
          }
        }
      }

      .load-text {
        font-weight: 500;
        font-size: 20px;
        color: #FF186B;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        margin-top: 10px;
      }
    }

    .list-hei::-webkit-scrollbar {
      display: none;
    }

    .table-head {
      background: #F7F9FC;
      border-radius: 10px 10px 10px 10px;
      margin-top: 32px;

      .table-name {
        font-weight: 500;
        font-size: 18px;
        color: #1E1714;
        line-height: 21px;
        padding: 16px 0;
        text-align: center;

        .table-text {
          display: flex;
          align-items: center;
          justify-content: center;

          .sort-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin-left: 4px;
          }
        }
      }
    }

    .exp-sty {
      margin-top: 12px;
      padding-bottom: 24px;
      border-bottom: 1px solid #E9EAF3;

      .list-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        text-align: center;
      }

      .statistics-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #767B93;
        line-height: 23px;
        text-align: center;

        span {
          color: #FF186B;
        }
      }
    }

    .bottom-info {
      height: 76px;
      padding: 24px;
      background: #FFFFFF;
      box-shadow: 0px -4px 22px 0px rgba(1, 0, 41, 0.1);
      border-radius: 0 0 16px 16px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      .list-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        text-align: center;
      }

      .statistics-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #767B93;
        line-height: 23px;
        text-align: center;

        span {
          color: #FF186B;
        }
      }
    }
  }

  .pos-sty {
    position: relative;

    .hover-rect {
      position: absolute;
      bottom: 24px;
      left: 16px;
      right: 16px;

      .invite-tip {
        width: 297px;
        padding: 3px 16px;
        background: #ff6aa8;
        box-shadow: inset 0px -1px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 16px 16px 0 0;
        margin: 0 auto;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
        text-align: center;

        span {
          color: #fff24e;
        }

        .up-arrow {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }
      }

      .rect-user {
        width: 434px;
        height: 100px;
        background: #ff6aa8;
        box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2);
        border-radius: 16px 16px 16px 16px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user-img {
          width: 64px;
          height: 68px;
          position: relative;

          .avatar-sty {
            position: relative;

            .crown-icon {
              width: 32px;
              height: 32px;
              position: absolute;
              left: 0;
              top: -10px;
            }

            .avatar {
              width: 64px;
              height: 64px;
              border-radius: 50%;
              background: #6f58ff;
            }

            .no-avatar {
              width: 64px;
              height: 64px;
              border-radius: 50%;
              font-weight: 600;
              font-size: 24px;
              color: #FFFFFF;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          .tag-sty {
            width: 64px;
            position: absolute;
            bottom: 0;
            margin: 0 auto;

            .in-num {
              padding: 0 10px;
              background: #1e1714;
              border-radius: 22px;
              font-weight: 600;
              font-size: 18px;
              color: #ffffff;
              line-height: 24px;
              text-align: center;
            }
          }
        }

        .user-tag {
          margin-left: 20px;

          .name-text {
            font-weight: 600;
            font-size: 16px;
            color: #ffffff;
            line-height: 19px;
          }

          .invite-user {
            font-weight: 600;
            font-size: 16px;
            color: #ffffff;
            line-height: 19px;
            margin-top: 4px;

            span {
              color: #fff24e;
              font-size: 20px;
              line-height: 24px;
            }
          }
        }

        .show-btn {
          min-width: 94px;
          min-height: 31px;
          background: #1e1714;
          border-radius: 8px 8px 8px 8px;
          padding: 6px 20px;
          font-weight: 600;
          font-size: 14px;
          color: #ffffff;
          font-style: italic;
          cursor: pointer;
        }
      }
    }
  }

  .area-tit {
    font-weight: 600;
    font-size: 24px;
    color: #1e1714;
    line-height: 28px;
  }

  .tooltip {
    cursor: pointer;
  }

  .label {
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    line-height: 24px;
  }

  .label-value {
    font-weight: 600;
    font-size: 24px;
    color: #ffffff;
    line-height: 34px;
  }

  .sign-value {
    color: #fff24e;
  }

  .flex-sty {
    display: flex;
    align-items: baseline;
  }

  .small-text {
    font-weight: 400;
    font-size: 16px;
    color: #aeb0b9;
    line-height: 19px;
    margin-left: 12px;
  }

  .text-label {
    font-weight: 500;
    font-size: 20px;
    color: #767b93;
    line-height: 23px;
    margin-top: 26px;
  }

  .money-value {
    font-weight: 600;
    font-size: 24px;
    color: #1e1714;
    line-height: 28px;
    margin-top: 18px;
  }

  .gray-text {
    color: #aeb0b9;
  }

  .pink-text {
    color: #ff186b;
  }

  .top-sty {
    margin-top: 0;
  }

  .handle-sty {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 26px;

    .disable-btn {
      padding: 8px 12px;
      background: #D8D8D8;
      border-radius: 6px 6px 6px 6px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      cursor: not-allowed;
    }

    .black-btn {
      padding: 8px 12px;
      background: #1e1714;
      border-radius: 6px 6px 6px 6px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      cursor: pointer;
    }

    .un-with-draw {
      padding: 8px 12px;
      background: #D8D8D8;
      border-radius: 6px 6px 6px 6px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      cursor: not-allowed;
    }

    .with-draw {
      padding: 8px 12px;
      background: #ff186b;
      border-radius: 6px 6px 6px 6px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      cursor: pointer;
    }
  }

  .first-text {
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #feae30;
  }

  .second-text {
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #92A3E8;
  }

  .three-text {
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
    color: #ff7a6e;
  }
}
</style>
